<template>
	<div class="sendBox" v-show="status">
		<header>
			<ul>
				<li @click="back">
					<i class="header_iocn"></i>
					<span>返回</span>
				</li>
				<li class="head_er_center">选择分享</li>
				<li><span @click="sendMSG()">发送</span></li>
			</ul>
		</header>
		<ul class="mian_head">
			<li v-for="(item,index) in tabs"><span :class="{back:index == num}" @click="tabList(index)">{{item}}</span></li>
		</ul>
		<div v-show="num == 0" class="uigetdir_main">
			<span>我的好友</span>
			<ul>
				<li v-for="item in friendList" @click="selsectList(item)">
					<i><i :class="{select:item.selected}"></i></i>
					<i><i><img :src="item.Tag_Profile_IM_Image?item.Tag_Profile_IM_Image:c2cHead"></i></i>
					<span>{{item.Tag_Profile_IM_Nick?item.Tag_Profile_IM_Nick:item.Info_Account}}</span>
				</li>
			</ul>
		</div>
		<div v-show="num == 1" class="uigetdir_main">
			<span>我的群组</span>
			<ul>
				<li v-for="item in groupList" @click="selsectList(item)">
					<i><i :class="{select:item.selected}"></i></i>
					<i><i><img :src="item.FaceUrl?item.FaceUrl:groupHead"></i></i>
					<span>{{item.Name?item.Name:item.GroupId}}</span>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
import Client from '../../assets/js/common';
import Chat from '../../assets/js/chat';
import c2cHead from '../../assets/img/my@3x.png';
import groupHead from '../../assets/img/the@3x.png';
import {Toast} from 'mint-ui';
export default{
	data(){
		return{
			tabs:['好友','群'],
			num: 0,
			friendList:[],
			groupList:null,
			c2cHead,
			groupHead,
			itemData:null//点击选中的人或群信息
		}
	},
	props:['status','shareData'],
	//shareData 需包含CollectUrl, CollectTitle, CollectImgUrl 三个字段信息
	created(){
		let loginInfo = Client.getStore('loginInfo');
		this.loginInfo = loginInfo;
		Chat.getAllFriend(loginInfo.identifier).then(res => {
            if(res == null) return;
			  res.InfoItem.forEach(ele => {
				  ele.SnsProfileItem.forEach(item=>{
					  ele[item.Tag] = item.Value;
				  });
				  ele.selected = false;
			  });
			  this.friendList = res.InfoItem;
			  //console.log('this.friendList',this.friendList);
		});
		Chat.getMyGroup(loginInfo.identifier).then(res => {
			console.log('我的群',res);
			res.forEach(item =>{
				item.selected = false;
			});
			this.groupList = res;
		});
	},
	mounted(){

	},
	methods:{
		back(){
			history.back()
		},
		tabList(index){
			this.num = index;
		},
		selsectList(item){
			if(item.selected){
				item.selected = false;
				this.itemData = null;
				return;
			}
			if(this.num == 0){
				this.friendList.forEach(ele=>{
					if(item.Info_Account == ele.Info_Account){
						ele.selected = true;
					}else{
						ele.selected = false;
					}
				});
			}else{
				this.groupList.forEach(ele=>{
					if(item.GroupId == ele.GroupId){
						ele.selected = true;
					}else{
						ele.selected = false;
					}
				});
			}
			this.itemData = item;
		},
		sendMSG(){
			if(this.itemData == null){
				Toast('未选择好友或群组');
				return;
			}
		    let myInfos = {
				selToID:this.itemData.Info_Account,
				identifierNick:this.loginInfo.identifierNick,
				identifier:this.loginInfo.identifier
			}
			if(this.num == 0){
				myInfos.selType = 'C2C';
				myInfos.selToID = this.itemData.Info_Account;
			}else{
				myInfos.selType = 'GROUP';
				myInfos.selToID = this.itemData.GroupId;
			}
			Chat.sendCustom(myInfos,this.shareData);
			this.resetList();
			this.$emit('hide');
		},
		resetList(){
			this.num = 0;
			this.itemData = null;
			this.friendList.forEach(ele=>{
				ele.selected = false;
			});
			this.groupList.forEach(ele=>{
				ele.selected = false;
			});
		}
	}
}
</script>

<style lang="less" scoped>
@import '../../assets/style/terminal';
@color_1: #999999;
.sendBox{
	width:100%;
	position: fixed;
	z-index: 99999;
	top:0;
	left:0;
}
	.header_iocn {
		background: url('../../assets/img/person/icon_up01@3x.png');
		background-size: 0.18rem 0.18rem;
	}
	.mian_head {
		width: 100%;
		display: flex;
		background: #fff;
		border-top: 1px solid #E1E1E1;
		li {
			flex: 1;
			height: 0.5rem;
			text-align: center;
			span {
				display: block;
				width: 0.88rem;
				height: 0.28rem;
				line-height: 0.28rem;
				border: 1px solid #E1E1E1;
				border-radius: 0.4rem;
				margin: 0.1rem auto;
				color: @color_1;
				font-size: .14rem;
			}
		}
	}
	.mian_head{
		li {
			.back {
				background: #F0F0F7;
				border:0;
				width: .9rem;
				height: .3rem;
				line-height: .3rem;
			}
		}
	}
	.uigetdir_main{
		
		background: #fff;
		ul{
			padding: 0 0.15rem;
			li{
				display: flex;
			}
			li>i{
				display: block;
				flex: 0.8;
				i{
					display: block;
					width:0.2rem;
					height: 0.2rem;
					border-radius: 50%;
					margin-top: 0.2rem;
				}
			}
			li>i:nth-of-type(2){
				flex: 1.5;
				i{
					width:0.4rem;
					height: 0.4rem;
					margin-top: 0.1rem;
					img{
						display: block;
						width:100%;
						height: 100%;
						border-radius: 50%;
					}
				}

			}
			li>i:nth-of-type(1) i{
				background: url('../../assets/img/person/icon_unsekected@3x.png');
				background-size:0.2rem;
			}
		}
	}
	.uigetdir_main>span{
		display: block;
		background: #F5F5F5;
		padding: 0rem 0.15rem;
		font-size: 0.12rem;
		height:0.37rem;
		line-height: 0.45rem;
		color: #818181;
	}
	.uigetdir_main {
		ul {
			li>span{
				display: inline-block;
				width: 80%;
				height: 0.6rem;
				line-height: 0.6rem;
				border-bottom:1px solid #ccc;
				flex: 8;
				font-weight: bold;
				font-size: 0.16rem;
			}
			li:last-of-type>span{
				border:0;
			}
			li>i:nth-of-type(1) .select{
				background: url('../../assets/img/person/icon_designate01@3x.png');
				background-size:0.2rem;
			}
		}
	}
</style>